<script setup lang="ts">
import axios from 'axios'
import { isRuntimeOnly, onMounted, ref } from 'vue'
// type channelItem = {
//   id: number
//   name: string
// }
// type resData = {
//   data: { channels: channelItem[] }
//   message: string
// }
import { channelItem, resData } from '../../../type/data'
import { useChannelStore } from '../../store/changeChannel';

const list = ref<channelItem[]>([])

onMounted(() => {
  getChannel()
})


const getChannel = async () => {
  const { data: res } = await axios.get<resData>('http://geek.itheima.net/v1_0/channels')
  console.log(res.data.channels);
  list.value = res.data.channels
}
// // 接收选中频道ID
// defineProps<{
//   seledId: number
// }>()
// // 子传父修改选中频道ID
// const emit = defineEmits<{ (e: 'change-seled', data: number) }>()

const changeStore = useChannelStore()
</script>

<template>
  <!-- <div class="channel-nav">
    <nav class="list">
      <a class="item" :class="{ active: item.id === seledId }" @click="emit('change-seled', item.id)"
        href="javascript:;" v-for="(item, i) in list" :key="item.id">
        {{ item.name }}
      </a>
    </nav>
  </div> -->
  <div class="channel-nav">
    <nav class="list">
      <a class="item" :class="{ active: changeStore.seledId === item.id }" @click="changeStore.changeSeled(item.id)"
        href="javascript:;" v-for="(item, i) in list" :key="item.id">
        {{ item.name }}
      </a>
    </nav>
  </div>

</template>